<template>
  <div class="box4" ref="map">MapView</div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import * as echarts from 'echarts'
import chinaJSON from './china.json'

const map = ref()
echarts.registerMap('china', chinaJSON)
//   注册地图
onMounted(() => {
  const myChart = echarts.init(map.value);
  myChart.setOption({
    //地图组件
    geo: {
      map: 'china',
      left: 50,
      right: 50,
      top: 50,
      bottom: 50,
      zoom: 1.2,  // 缩放比例
      center: [104.114129, 37.550339],  // 中心点
      label: {
        show: true,
        fontSize: 14,
        color: '#fff'
      },
      itemStyle: {
        //设置渐变样式
        areaColor: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#0056c4'  // 起始颜色
            },
            {
              offset: 1,
              color: '#42b9fb'  // 结束颜色
            }
          ],
          global: false  // 全局渐变
        }
      },
      //   高亮效果
      emphasis: {
        itemStyle: {
          areaColor: '#2B91B7'  // 高亮颜色
        },
        label: {
          show: true,
          fontSize: 20,
          fontWeight: 'bold'
        }
      }
    },
    series: [
      {
        type: 'lines',
        data: [
          {
            coords: [
              [87.617733, 43.792818],
              [103.823557, 36.058039]
            ],
            lineStyle: {
              // 线条样式
              normal: {
                color: '#ff4b7a',
                width: 5,
                opacity: 0.5,
                curveness: 0.2
              }
            },
          },
          {
            coords: [
              [116.405285, 39.904989],
              [113.665412, 23.129163]
            ],
            lineStyle: {
              // 线条样式
              normal: {
                color: '#ff4b7a',
                width: 5,
                opacity: 0.5,
                curveness: 0.2
              }
            },
          },
          {
            coords: [
              [116.405285, 39.904989],
              [103.823557, 36.058039],
            ],
            lineStyle: {
              // 线条样式
              normal: {
                color: '#ff4b7a',
                width: 5,
                opacity: 0.5,
                curveness: 0.2
              }
            },
          },
          {
            coords: [
              [87.617733, 43.792818],
              [91.132212, 29.660361]
            ],
            lineStyle: {
              // 线条样式
              normal: {
                color: '#ff4b7a',
                width: 5,
                opacity: 0.5,
                curveness: 0.2
              }
            },
          },
          {
            coords: [
              [91.132212, 29.660361],
              [113.280637, 23.125178]
            ],
            lineStyle: {
              // 线条样式
              normal: {
                color: '#ff4b7a',
                width: 5,
                opacity: 0.5,
                curveness: 0.2
              }
            },
          },
          {
            coords: [
              [ 114.298572, 30.584355],
              [104.065735, 30.659462]
            ],
            lineStyle: {
              // 线条样式
              normal: {
                color: '#ff4b7a',
                width: 5,
                opacity: 0.5,
                curveness: 0.2
              }
            },
          },
          {
            coords: [
              [ 114.298572, 30.584355],
              [ 103.823557, 36.058039]
            ],
            lineStyle: {
              // 线条样式
              normal: {
                color: '#ff4b7a',
                width: 5,
                opacity: 0.5,
                curveness: 0.2
              }
            },
          },
        ],
        // 特效
        effect: {
          show: true,
          symbol: 'arrow',
          symbolSize: 10,
          color: 'red',
          trailLength: 0, // 特效尾迹长度
          symbolKeepAspect: true, // 保持图形纵横比
          loop: true, // 循环显示
        },
      },
    ]
  });
})

</script>

<style>

</style>